<template>
	<view>
		<view class="form" v-if="!loginerr">
			<image src="../../static/index/login.png" class="loginbg"></image>
			<view class="list-one">
				<input type="number" v-model="form.mobile" placeholder="请输入手机号" />
			</view>
			<view class="list-one">
				<view class="left">
					<input type="number" v-model="form.code" placeholder="请输入验证码" />
				</view>
				<view class="right" @click="send_msg">{{ valtext }}</view>
			</view>
			<view class="btn" @click="login">登录</view>
		</view>
		<view v-if="loginerr" class="cont">
			<view class="topbg">
				<view class="image">
					<u-swiper :list="banner" keyName="pic" radius="0" height="258" :autoplay="false"></u-swiper>
				</view>
			</view>
			<view class="notice" @click="open_notice">
				<view class="icon In_m">
					<image src="../../static/index/icon_tongzhi@2x.png" mode=""></image>
				</view>
				通知公告
				<!-- <text>您有一条消息未读</text> -->
			</view>
			<view class="gridcont">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem, listIndex) in tablist" :key="listIndex" @click="click_nav(listItem)">
						<image class="icon" :src="listItem.imgUrl"></image>
						<text class="grid-text">{{ listItem.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="hotcont">
				<view class="titname">热门服务</view>
				<view class="navtab">
					<view class="tab-one l onebg" @click="click_path(1)">
						<view class="tit">三务公开</view>
						<view class="val">党务 政务 财务</view>
					</view>
					<view class="tab-one l twobg" @click="click_path(2)">
						<view class="tit">惠农补贴</view>
						<view class="val">补贴发放公示</view>
					</view>
					<view class="tab-one l thrbg" @click="click_path(3)">
						<view class="tit">社会救助</view>
						<view class="val">在线提交</view>
					</view>
					<view class="tab-one l forbg" @click="click_path(4)">
						<view class="tit">就业帮扶</view>
						<view class="val">政策查看 申请</view>
					</view>
					<view class="clear"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { smslogin, sendsmscode, appbanner } from '@/api/index.js';
export default {
	data() {
		return {
			form: {
				mobile: '',
				code: '',
				scene: 1
			},
			valtext: '发送验证码',
			loginerr: false,
			// 首页
			banner: [],
			tablist: [
				{
					imgUrl: '../../static/index/icon01.png',
					title: '农机课堂',
					url: '/pages/index/technology/technology'
				},
				{
					imgUrl: '../../static/index/icon02.png',
					title: '农具租赁',
					url: '/pages/index/tool/tool'
				},
				{
					imgUrl: '../../static/index/icon03.png',
					title: '邻里互助',
					url: '/pages/index/neighbor/neighbor'
				},
				{
					imgUrl: '../../static/index/icon04.png',
					title: '随手拍',
					url: '/pages/index/snapshot/snapshot'
				}
			]
		};
	},
	created() {
		const loginty = uni.getStorageSync('Authorization');
		if (loginty) {
			this.loginerr = true;
			uni.showTabBar();
		} else {
			this.loginerr = false;
			uni.hideTabBar();
		}
	},
	onLoad() {
		this.get_banner();
	},
	methods: {
		open_notice() {
			uni.navigateTo({
				url: '/pages/index/notice/notice'
			});
		},
		click_path(type) {
			switch (type) {
				case 1:
					uni.navigateTo({
						url: '/pages/index/publicity/publicity'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/index/subsidy/subsidy'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/index/society/society'
					});
					break;
				case 4:
					uni.navigateTo({
						url: '/pages/index/professional/professional'
					});
					break;
			}
		},
		click_nav(item) {
			uni.navigateTo({
				url: item.url
			});
		},
		send_msg() {
			if (!this.form.mobile) {
				uni.$u.toast('请输入手机号');
			}
			sendsmscode(this.form).then((res) => {
				if (res.data) {
					uni.$u.toast('发送成功');
					this.time_add();
				}
			});
		},
		time_add() {
			this.valtext = 60;
			let that = this;
			var _time = setInterval(function () {
				that.valtext = that.valtext - 1;
				if (that.valtext == 0) {
					that.valtext = '发送验证码';
					clearInterval(_time);
				}
			}, 1000);
		},
		login() {
			smslogin(this.form).then((res) => {
				if (res.data) {
					uni.$u.toast('登录成功');
					uni.setStorageSync('Authorization', res.data.accessToken);
					uni.setStorageSync('refreshToken', res.data.refreshToken);
					uni.setStorageSync('userId', res.data.userId);
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 1000);
				}
			});
		},
		get_banner() {
			appbanner().then((res) => {
				this.banner = res.data.list;
			});
		}
	}
};
</script>

<style lang="scss">
.form {
	width: 100vw;
	height: 100vh;
	.loginbg {
		width: 750rpx;
		height: 375rpx;
		display: block;
		margin-bottom: 48rpx;
	}
	.list-one {
		margin: 0 auto 48rpx;
		border-radius: 40rpx;
		padding: 24rpx 48rpx;
		border: 2rpx solid #ccc;
		width: 70%;
		position: relative;
		.right {
			position: absolute;
			right: 0;
			top: 0;
			background-color: #8BB950;
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			height: 100%;
			line-height: 96rpx;
			padding: 0 24rpx;
			color: #fff;
			z-index: 9;
			width: 164rpx;
			text-align: center;
		}
	}
	.btn {
		width: 80%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #8BB950;
		border-radius: 40rpx;
		color: #fff;
		margin: 24rpx auto 0;
	}
}
.cont {
	.topbg {
		background-color: #39488a;
	}
	.gridcont {
		background: #FFFFFF;
		box-shadow: 0px 0px 16rpx 0px rgba(0,0,0,0.05);
		padding: 22rpx 0;
		margin: 20rpx 24rpx;
		border-radius: 12rpx;
		.icon {
			width: 130rpx;
			height: 130rpx;
			display: block;
			margin-top: 12rpx;
		}
		.grid-text {
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			margin-top: 16rpx;
			margin-bottom: 12rpx;
		}
	}
	.notice {
		margin: -44rpx 24rpx 0;
		height: 82rpx;
		box-shadow: 0px 4rpx 16rpx 0px rgba(0,0,0,0.04);
		border-radius: 8rpx;
		line-height: 82rpx;
		background: #FFFFFF;
		display: flex;
		color: #333333;
		font-size: 28rpx;
		z-index: 99999;
		position: relative;
		padding: 4rpx 0;
		.icon{
			width: 60rpx;
			height: 60rpx;
			background: linear-gradient( 180deg, #9BCB74 0%, #80AD35 100%);
			border-radius: 50%;
			margin: 12rpx 30rpx 0;
			image{
				width: 52rpx;
				height: 52rpx;
			}
		}
		text{
			font-size: 24rpx;
			color: #658E2F;
			margin-left: 36rpx;
		}
	}
	.hotcont {
		.titname{
			margin: 24rpx 30rpx 12rpx;
			background: url('../../static/index/subtract.png') no-repeat;
			font-weight: bold;
			color: #000000;
			background-position: 24rpx 30rpx;
			background-size: 68rpx 26rpx; 
			height: 44rpx;
			padding-bottom: 16rpx;
		}
		.navtab {
			overflow: hidden;
			margin: 12rpx;
			.tab-one{
				width: 363rpx;
				height: 204rpx;
			}
			.tit {
				margin-top: 52rpx;
				margin-left: 48rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.val {
				margin-top: 6rpx;
				margin-left: 48rpx;
				font-size: 24rpx;
			}
			.onebg{
				background: url('../../static/index/bottm01.png') no-repeat;
				background-size: 100% 100%;
				color: #3179A2;
			}
			.twobg{
				background: url('../../static/index/bottm02.png') no-repeat;
				background-size: 100% 100%;
				color: #658E2F;
			}
			.forbg{
				background: url('../../static/index/bottm03.png') no-repeat;
				background-size: 100% 100%;
				color: #4F5A8C;
			}
			.thrbg{
				background: url('../../static/index/bottm04.png') no-repeat;
				background-size: 100% 100%;
				color: #ACA23A;
			}
		}
	}
}
</style>
